{% extends "base.html" %}
{% block title %}Прохождение теста{% endblock %}
{% block content %}
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card shadow-sm mb-4">
        <div class="card-body d-flex justify-content-between align-items-center">
          <div>
            <h1 class="h4 mb-1">{{ test.title }}</h1>
            <p class="mb-0 text-muted">Всего вопросов: {{ question_payload|length }}</p>
          </div>
          <div>
            <a class="btn btn-outline-secondary" href="{{ url_for('user.test_detail', test_id=test.id) }}">Отмена</a>
          </div>
        </div>
      </div>
      {% if time_limit_minutes and remaining_seconds is not none %}
        <div
          class="alert alert-warning d-flex justify-content-between align-items-center flex-wrap gap-2 attempt-timer"
          data-remaining-seconds="{{ remaining_seconds }}"
          data-status-url="{{ status_url }}"
          data-form-id="attempt-form"
          data-warning-threshold="60"
        >
          <span>Лимит времени: {{ time_limit_minutes }} мин</span>
          {% if expires_at_local %}
            <span>Завершить до: {{ expires_at_local.strftime('%d.%m.%Y %H:%M:%S') }}</span>
            <span>Оставшееся время: <strong class="attempt-timer-display">{{ remaining_time_display }}</strong></span>
          {% endif %}
        </div>
      {% endif %}
      <form method="post" id="attempt-form">
        {{ form.hidden_tag() }}
        {% for question, answers in question_payload %}
          <div class="card shadow-sm mb-3">
            <div class="card-body">
              <h2 class="h5">{{ loop.index }}. {{ question.question_text }}</h2>
              <p class="text-muted small mb-3">
                Тип: {{ 'Одиночный выбор' if question.question_type == 'single' else 'Множественный выбор' }}
              </p>
              {% if question.question_type == 'single' %}
                {% for answer in answers %}
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="question-{{ question.id }}" id="answer-{{ answer.id }}" value="{{ answer.id }}">
                    <label class="form-check-label" for="answer-{{ answer.id }}">{{ answer.answer_text }}</label>
                  </div>
                {% endfor %}
              {% else %}
                {% for answer in answers %}
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="question-{{ question.id }}" id="answer-{{ answer.id }}" value="{{ answer.id }}">
                    <label class="form-check-label" for="answer-{{ answer.id }}">{{ answer.answer_text }}</label>
                  </div>
                {% endfor %}
              {% endif %}
            </div>
          </div>
        {% endfor %}
        <div class="d-flex justify-content-between align-items-center">
          <span class="text-muted">Проверьте выбранные ответы перед отправкой</span>
          {{ form.submit(class="btn btn-success btn-lg") }}
        </div>
      </form>
    </div>
  </div>
{% endblock %}

<script>
(function () {
  const timerContainer = document.querySelector('.attempt-timer');
  if (!timerContainer) {
    return;
  }

  const statusUrl = timerContainer.dataset.statusUrl;
  const formId = timerContainer.dataset.formId;
  const warningThreshold = parseInt(timerContainer.dataset.warningThreshold || '60', 10);
  const display = timerContainer.querySelector('.attempt-timer-display');
  const form = formId ? document.getElementById(formId) : null;
  let remaining = parseInt(timerContainer.dataset.remainingSeconds || '0', 10);
  if (!remaining || Number.isNaN(remaining)) {
    return;
  }

  const format = (seconds) => {
    if (seconds <= 0) {
      return '0 сек';
    }
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    const parts = [];
    if (hours) {
      parts.push(hours + ' ч');
    }
    if (minutes) {
      parts.push(minutes + ' мин');
    }
    if (!hours && secs) {
      parts.push(secs + ' сек');
    }
    return parts.join(' ') || 'менее минуты';
  };

  const applyWarningState = (seconds) => {
    if (seconds <= warningThreshold) {
      timerContainer.classList.remove('alert-warning');
      timerContainer.classList.add('alert-danger');
    } else {
      timerContainer.classList.remove('alert-danger');
      timerContainer.classList.add('alert-warning');
    }
  };

  const handleCompletion = () => {
    clearInterval(tickInterval);
    if (statusInterval) {
      clearInterval(statusInterval);
    }
    if (form) {
      form.submit();
    }
  };

  const updateDisplay = (seconds) => {
    if (display) {
      display.textContent = format(Math.max(seconds, 0));
    }
    applyWarningState(seconds);
  };

  updateDisplay(remaining);

  const tickInterval = setInterval(() => {
    remaining -= 1;
    if (remaining <= 0) {
      updateDisplay(0);
      handleCompletion();
      return;
    }
    updateDisplay(remaining);
  }, 1000);

  let statusInterval = null;
  if (statusUrl) {
    statusInterval = setInterval(() => {
      fetch(statusUrl, { headers: { 'Accept': 'application/json' } })
        .then((response) => response.ok ? response.json() : null)
        .then((data) => {
          if (!data) {
            return;
          }
          if (data.completed) {
            handleCompletion();
            return;
          }
          if (typeof data.remaining_seconds === 'number') {
            remaining = data.remaining_seconds;
            updateDisplay(remaining);
            if (remaining <= 0) {
              handleCompletion();
            }
          }
        })
        .catch(() => {});
    }, 15000);
  }
})();
</script>